<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <!-- v-bind 主要用法是动态更新 HTML 元素上的属性 -->
    <div id="app1">
        <!-- 当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表： -->
        <div :class="[activeCls, errorCls]"></div>
        <!-- 显示 <div class="active error"></div>  -->


        <!-- 也可以使用三元表达式来根据条件切换 class，例如： -->
        <div :class="[isActive ? activeCls : '', errorCls]"></div>
        <!-- 显示 <div class="active error"></div> -->
        <!-- 样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会应用。class 有多个条件时，这样写比较繁琐，可以使用对象语法： -->

        <div :class="[{ 'active': isActive }, errorCls]"></div>
        <!-- 显示 <div class="active error"></div> -->


        <!-- 还可以使用 data、computed、methods 三种方法，以计算属性为例：-->

        <button :class="classes"></button>
        <!-- 显示 <button class="btn btn-large btn-disabled"></button> -->

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                activeCls: "active",
                errorCls: "error",
                isActive: true,

                size: 'large',
                disabled: true
            },
            computed: {
                classes: function () {
                    return [
                        "btn",
                        {
                            ['btn-'+this.size] : this.size !== '',
                            'btn-disabled': this.disabled
                        }
                    ]
                }
            }
        });


    </script>

</body>
</html>